<template>
    <ul class="tab">
        <router-link to="/myfav" tag="li" ><i class="glyphicon glyphicon-book"></i>收藏</router-link>
        <router-link to="/post" tag="li"><i class="glyphicon glyphicon-th-list"></i>图书馆</router-link>
        <router-link to="/find" tag="li"><i class="glyphicon glyphicon-search"></i>发现</router-link>
        <router-link to="/about" tag="li"><i class="glyphicon glyphicon-user"></i>我的</router-link>
    </ul>

</template>

<script>
    export default {
        name: "parent-tab"
    }
</script>

<style scoped>

.router-link-active{
    color:green;
}

.tab{
    height: 1.2rem;
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    border-top: 1px gray solid;
    background-color: #fff;
}

.tab li{
    width:25%;
    height: 1.2rem;
    float: left;
    border-right: 1px gray solid;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}

.tab li i{
    font-size:22px;
}

</style>